<template>
	<view class="login">
		<view class="content-wrapper">
			<view class="title">
				<h1>请登录您的账号</h1>
			</view>
			<view class="login-form">
				<view class="login-form-items">
					<view class="login-form-items-title">手机号</view>
					<input type="text" class="login-input" placeholder="手机号" />
				</view>

				<view class="login-form-items">
					<view class="login-form-items-title">登录密码</view>
					<input type="password" class="login-input" placeholder="请输入登录密码" />
				</view>

				<view class="login-form-items">
					<view class="login-form-items-title">验证码</view>
					<input type="text" class="login-input" placeholder="请输入验证码" />
					<view class="captcha-wrapper">
						<img src="../../static/yzm.png"></img>
					</view>
				</view>
			</view>
		</view>
			<div class="submit-wrapper">
						<button type="primary" class="login-btn" @tap="goregirect()">登录</button>
			</div>
			<view class="title">
				<h1>其它登录方式</h1>
			</view>
			<view class="iconGroup">
				<!-- 可以循环遍历生成 -->
				<view class="iconGroupItem green">
					<text class="iconfont icon-weixin"></text>
					微信
				</view>
				<view class="iconGroupItem blue">
					<text class="iconfont icon-QQ"></text>
					QQ
				</view>
				<view class="iconGroupItem red">
					<text class="iconfont icon-xinlangweibo"></text>
					微博
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		methods: {
			goregirect(){
			    uni.navigateTo({
			        //关闭当前页面，跳转到应用内的某个页面。
			        url:'/pages/DengLu2/DengLu2'
			    });
			}
		},
	}
</script>

<style lang="scss">
	page {
		background-image: url("../../static/background.png");
		background-size: 100% 100%;
		width: 100%;
		height: 100%;
	}

	.login {
		.content-wrapper {
			width: 100%;

			.title {
				margin-top: 0px;
				padding-top: 20px;
				width: 100%;
				margin-bottom: 20px;
				color: #ffffff;

				h1 {
					border: 0px;
					width: 50%;
					margin: 0 auto;
					text-align: center;
					border-bottom: 3px solid #E3E3E3;
					height: 50px;
					line-height: 50px;
					font-size: 17px;
					overflow: hidden;
					font-weight: 400;
				}
			}

			.login-form {
				margin: 20px 10px 10px 10px;
				background: #FFFFFF;

				.login-form-items {
					padding: 15px 20px;
					border-bottom: 1px solid #F3F4F5;
					position: relative;
					display: -webkit-flex;
					display: flex;

					.login-form-items-title {
						width: 30%;
						line-height: 22px;
						height: 22px;
						flex-shrink: 0;
					}

					.login-input {
						width: 100%
					}

					img {
						width: 200px;
						height: 70px;
						max-width: 100%;
						max-height: 50%;
					}
				}
			}
		}
		.title {
			margin-top: 0px;
			padding-top: 80px;
			width: 100%;
			margin-bottom: 20px;
			color: #ffffff;
		
			h1 {
				border: 0px;
				width: 50%;
				margin: 0 auto;
				text-align: center;
				border-bottom: 3px solid #E3E3E3;
				height: 50px;
				line-height: 50px;
				font-size: 17px;
				overflow: hidden;
				font-weight: 400;
			}
		}
		.iconGroup{
			display: flex;
			justify-content: space-around;
			.iconGroupItem{
				width: 68px;
				height: 68px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				font-size: 10px;
				.iconfont{
					font-size: 25px !important;
					margin-bottom: 5rpx;
				}
			}
			.green{
				background-color: rgba(69, 202, 53, 100);
			}
			.blue{
				background-color: rgba(22, 103, 210, 100);
			}
			.red{
				background-color: rgba(255, 90, 87, 100);
			}
		}
		.submit-wrapper {
			padding: 10px;
			padding-top: 10px;
		}

	}
</style>
